<%--
  Created by IntelliJ IDEA.
  User: Eric
  Date: 2019/9/24
  Time: 19:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="${path}/css/register/register.css" type="text/css">
</head>

<body>
<div id="head">
    <div id="logo">
        <div style="float: left;"><img src="http://pzgv309jp.bkt.clouddn.com/1fa25c33-124f-44fd-887f-a889d08c2120.jpg" width="60px" height="40px"
                                       style="opacity: 0.7;border-radius: 80px;margin-top: 6px"></div>
        <div style="float: left;margin: 10px 5px;">
            <span style="font-family: '楷体';font-size:26px">悠 U</span> &nbsp;&nbsp;注册</div>
    </div>


    <form method='post' onsubmit=" return mytetx()" action="${path}/user/returnlogin" class='form-horizontal' role='form'>
        <div id="phone">

            <select name="area" id="origin">
                <option value="中国">86</option>
                <option value="阿富汗">93</option>
                <option value="爱尔兰">352</option>
                <option value="埃及">20</option>
            </select>

            <input type="text" name="phone" onblur="checkPhone(this)" placeholder="请您输入手机号" id="phoneNumber">
            <span id="phones">${errorMaps.phone}</span>
            <input style="display:none" value="false"  id="phoneFlag"/>
        </div>
        <input type="text" name="email" onblur="checkemail(this)" placeholder="请输入邮箱" id="email" style="width: 310px;height: 35px;margin-top: 25px;margin-left: 50px;margin-right: 10px">
        <span  id="emails">${errorMaps.email}</span>
        <input style="display:none" value="false"  id="emailFlag"/>
        <div id="lcode">
            <input type="text"  name="code" onblur="checkcode(this)" placeholder="请您输入验证码" id="Code" >
            <button  class="btn btn-success" onclick="sendcode()">发送验证码</button>
            <span id="codes">${errorMaps.code}</span>
            <input style="display:none" value="false"  id="codeFlag"/>
        </div>
        <input type="text"  name="password" onblur="checkpassword(this)"  placeholder="请输入8-20位密码,需要包含字母及数字" id="Password">
        <span id="passwords">${errorMaps.password}</span>
        <input style="display:none" value="false"  id="passwordFlag"/>
        <input type="text" name="pwd" onblur="checkpwd(this)" placeholder="请再次输入密码" id="repassword">
        <span  id="pwd">${errorMaps.pwd}</span>
        <input style="display:none" id="pwdFlag" value="false"/>
        <%--<a href="${path}/index.html">--%>
        <button type='submit'   class="btn btn-success" id="register">同意服务条款并注册</button>
        <%--</a>--%>
    </form>
    <div id="agree">
        <input type="checkbox">&nbsp;我已阅读并同意 <span style="font-size: 12px"><a href="#">悠 U服务协议</a>
                <a href="">悠 U会员条款</a>
                <a href="">悠 U免责声明</a> </span>
    </div>
    <div id="intro" style="margin-top: 10px">
        已有悠U账号,点击<a href="${path}/userlogin/login">&nbsp;登录</a>

    </div>

</div>

<!-- 底部导航 begin -->
<div class="container-fluid">
    <div class="row">
        <nav class="navbar navbar-inverse fixed-bottom" role="navigation">
            <div class="container-fluid" style="font-size: 13px">
                <div class="row">
                    <ul class="nav navbar-nav">
                        <li>
                            <div style="color: rgb(177, 177, 177);margin-top: 50px;margin-left: 150px">
                                <h4>悠&nbsp;U旅行</h4>
                                <p>悠&nbsp;U是一个新方式的<span style="color: bisque"> "旅行交友"</span> 的网站,<br>
                                    旨在帮助旅行者计划和结伴游玩,<br>
                                    可以提供业余的引路人带给旅行者更好的 <span style="color: bisque"> "游玩体验"</span><br>
                                    提供一定的旅行日记,打造 <span style="color: bisque">"新方式旅行交友"</span><br>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div style="color: rgb(177, 177, 177);margin-top: 50px;margin-left: 180px">
                                <h4 style="text-align: center">关于我们</h4>
                                <ul class="nav navbar-nav" style="list-style: none;margin-left: 0px">
                                    <li>关于悠 U</li>
                                    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;联系我们</li><br>
                                    <li>服务协议</li>
                                    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;游记协议</li><br>
                                    <li>达人协议</li>
                                    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;隐私政策</li><br>
                                    <li>网络信息侵权通知指引</li><br>
                                    <li>网站地图</li>
                                    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商业合作</li><br>
                                    <li style="color: bisque">&nbsp;&nbsp;&nbsp;加入我们</li>

                                </ul>
                            </div>
                        </li>
                        <li>
                            <div style="color: rgb(177, 177, 177);margin-top: 50px;margin-left: 180px">
                                <h4 style="text-align: center">帮助中心</h4>
                                <ul class="nav navbar-nav" style="list-style: none;margin-left: 0px">
                                    <li>新手上路</li><br>
                                    <li style="color: bisque">意见反馈</li>
                                    <li>&nbsp;&nbsp;&nbsp;&nbsp;常见问题</li><br>
                                    <li style="color: bisque">帮助中心</li>
                                    <li>&nbsp;&nbsp;&nbsp;&nbsp;旅行工具</li><br>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <br><br>
                <hr>
                <div style="color: rgb(177, 177, 177);margin-top: 20px;margin-left: 150px;font-size: 12px">
                    <div style="float: left;"><img src="http://pzgv309jp.bkt.clouddn.com/1fa25c33-124f-44fd-887f-a889d08c2120.jpg" width="60px" height="40px"
                                                   style="opacity: 0.7;border-radius: 80px;">
                    </div>
                    <div style="float: left;margin: 10px 5px;font-family: '楷体';font-size:18px">悠 U</div>
                    <div style="float: left;;margin-top: 10px;margin-left: 30px">© 2019 悠U
                        版权所有&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;经营许可&nbsp;&nbsp;&nbsp;营业执照</div>
                    <div style="clear: both;margin-left: 130px;margin-bottom: 100px">悠U不是旅行社,也不是代理商,我们只提供一些免费、客观、公正
                        、计费的攻略指南,以及一些业余的引路人
                        对外部网站概不负责</div>

                </div>
            </div>
            <div
                    style="float: right;width: 40px;height: 50px;margin-right: 10px;background-color: aliceblue;text-align: center">
                <a href="#top" style="color: rgb(177, 177, 177)"><br>Top&nbsp;↑</a>
            </div>
        </nav>

    </div>
</div>

<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="${path}/plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>

<script>

    <%--手机ajax验证--%>
    function checkPhone(obj){
        var phone=obj.value;
        var re= new RegExp("^1[3|4|5|8][0-9]\\d{4,8}$");
        if(null!=phone&&phone.length>0){
            if(!re.test(phone)){
                $("#phones").html("手机格式输入不正确!");
                document.getElementById("phoneFlag").value='false';
            }else{
                $.get('${path}/user/checkphone',{phone:phone},function (data){
                    if(data.flag==false){
                        $("#phones").html("该手机已被注册");
                        document.getElementById("phoneFlag").value='false';

                    }else{
                        $("#phones").html("");
                        document.getElementById("phoneFlag").value='true';


                    }
                })
            }
        }
    }

    //邮箱验证
    function checkemail(obj){
        var emails=obj.value;
        var re= new RegExp("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$");

        if( null != emails && emails.length > 0 ){
            if(!re.test(emails)){
                $("#emails").text("请输入正确的邮箱格式");
                document.getElementById("emailFlag").value='false';
            }else{
                $("#emails").text("");
                document.getElementById("emailFlag").value='true';
            }
            return;
        }else{
            $("#emails").text("请输入邮箱");
            document.getElementById("emailFlag").value='false';
        }
    }
    //密码验证
    function checkpassword(obj){
        var pwd=obj.value;
        var re= new RegExp("(?=.*([a-zA-Z].*))(?=.*[0-9].*)[a-zA-Z0-9-*/+.~!@#$%^&*()]{8,16}$");

        if( null != pwd && pwd.length > 0 ){
            if(!re.test(pwd)){
                $("#passwords").text("请输入8-20位密码,需要包含字母及数字");
                document.getElementById("pwdFlag").value='false';
            }else{
                $("#passwords").text("");
                document.getElementById("pwdFlag").value='true';
            }

        }else{
            $("#passwords").text("请输入密码");
            document.getElementById("pwdFlag").value='false';
        }
    }

    //再次验证
    function  checkpwd(obj){
        var pwd=obj.value;
        var password=  document.getElementById("password").value; //


        if(null==pwd){
            $("#pwd").text("请再次输入密码");
            document.getElementById("pwdFlag").value='false';
        }else{
            if(pwd!=password){

                $("#pwd").text("两次输入密码不匹配");
                document.getElementById("pwdFlag").value='false';
            }else{
                $("#pwd").text("");
                document.getElementById("pwdFlag").value='true';
            }
        }

    }

    function sendcode() {
        var phoneNumber = document.getElementById("phoneNumber").value;
        var Password = document.getElementById("Password").value;
        var email = document.getElementById("email").value;
        $.post('${path}/user/sendcode',{phone:phoneNumber,password:Password,email:email});

    }

    function  checkcode(){
        var Code=document.getElementById("Code").value;
        var phone=document.getElementById("phoneNumber").value;

        $.get('${path}/user/checkcode',{verCode:Code,phone:phone},function (data){
            if(data.flag==false){
                $("#codes").html("验证码错误");
                document.getElementById("codeFlag").value='false';

            }else{
                $("#codes").html("");
                document.getElementById("codeFlag").value='true';


            }
        })

    }

    function  mytetx() {


        var pwdFlag=  document.getElementById("pwdFlag").value;
        var phoneFlag=  document.getElementById("phoneFlag").value;
        var codeFlag=  document.getElementById("codeFlag").value;
        var passwordFlag=  document.getElementById("pwdFlag").value;
        var emailFlag=  document.getElementById("emailFlag").value;
        var phoneNumber = document.getElementById("phoneNumber").value;
        var Password = document.getElementById("Password").value;

        alert(pwdFlag);
        alert(phoneFlag);
        alert(codeFlag);
        alert(passwordFlag);
        alert(emailFlag);

        if(null !=pwdFlag && null!=phoneFlag && null!=passwordFlag && null!=emailFlag && null!=codeFlag &&
            pwdFlag.length>0 && phoneFlag.length>0 && passwordFlag.length>0 && emailFlag.length>0 && codeFlag.length>0 &&
            pwdFlag=='true' && phoneFlag=='true' && passwordFlag=='true' && emailFlag=='true' && codeFlag=='true'){

            $.post('${path}/user/insertuser',{phone:phoneNumber,password:Password})
            return true;

        }
        if(pwdFlag==null){

            $("#pwd").html("请第二次输入密码");

        }
        if(phoneFlag==null){
            $("#phones").html("请输入手机号");
        }
        if(passwordFlag==null){
            $("#passwords").html("请输入8-20位密码,需要包含字母及数字");
        }
        if(emailFlag==null){
            $("#emails").html("请输入邮箱");
        }

        return false;

    }









</script>
</body>

</html>

